<template>
  <ContentWrap>
    <el-card shadow="never">
      <template #header>
        <div class="flex items-center">
          <Icon icon="ep:search" class="mr-2" />
          <span class="text-lg font-semibold">教学案例综合检索</span>
        </div>
      </template>

      <div class="space-y-6">
        <!-- 搜索区域 -->
        <el-card shadow="never" class="bg-gray-50">
          <div class="flex items-center space-x-4">
            <el-input
              v-model="searchKeyword"
              placeholder="请输入关键词搜索教学案例..."
              size="large"
              clearable
            >
              <template #prefix>
                <Icon icon="ep:search" />
              </template>
            </el-input>
            <el-button type="primary" size="large" @click="handleSearch">
              <Icon icon="ep:search" class="mr-1" />
              搜索
            </el-button>
            <el-button size="large" @click="handleAdvancedSearch">
              <Icon icon="ep:setting" class="mr-1" />
              高级搜索
            </el-button>
          </div>
        </el-card>

        <!-- 功能卡片 -->
        <el-row :gutter="20">
          <el-col :span="8">
            <el-card shadow="hover" class="text-center">
              <Icon icon="ep:filter" class="text-4xl text-blue-500 mb-4" />
              <h3 class="text-lg font-medium mb-2">智能筛选</h3>
              <p class="text-gray-600">按学科、年级、难度等条件筛选案例</p>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card shadow="hover" class="text-center">
              <Icon icon="ep:collection-tag" class="text-4xl text-green-500 mb-4" />
              <h3 class="text-lg font-medium mb-2">标签管理</h3>
              <p class="text-gray-600">通过标签快速定位相关案例</p>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card shadow="hover" class="text-center">
              <Icon icon="ep:download" class="text-4xl text-orange-500 mb-4" />
              <h3 class="text-lg font-medium mb-2">案例下载</h3>
              <p class="text-gray-600">下载和收藏优质教学案例</p>
            </el-card>
          </el-col>
        </el-row>

        <el-divider />

        <div class="text-center text-gray-500">
          <Icon icon="ep:info-filled" class="text-2xl mb-2" />
          <p>教学案例综合检索功能正在开发中...</p>
        </div>
      </div>
    </el-card>
  </ContentWrap>
</template>

<script setup lang="ts">
defineOptions({ name: 'TeachingCaseSearch' })

const searchKeyword = ref('')

const handleSearch = () => {
  console.log('搜索关键词:', searchKeyword.value)
  // TODO: 实现搜索逻辑
}

const handleAdvancedSearch = () => {
  console.log('打开高级搜索')
  // TODO: 实现高级搜索逻辑
}
</script>

<style scoped>
.space-y-6 > * + * {
  margin-top: 1.5rem;
}
</style>
